<template>
  <div class="container">
    <h2>购物车</h2>
    <div class="product" v-for="product in products" :key="product.id">
      <h2>{{ product.name }}-¥：{{ product.price }}-数量：<input type="number" v-model="product.quantity" min="1"></h2>
      <button @click="addToCart(product)">加入购物车</button>
      <button @click="removeFromCart(product.id)">删除商品</button>
    </div>
    <cart></cart>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import Cart from './components/Cart.vue'

export default {
  name: 'App',
  components: {
    Cart
  },
  data() {
    return {
      products: [
        { id: 1, name: '手机', price: 10, quantity: 1 },
        { id: 2, name: '电脑', price: 20, quantity: 1 },
        { id: 3, name: '键盘', price: 30, quantity: 1 }
      ]
    }
  },
  methods: {
    ...mapActions(['addProduct', 'removeProduct']),
    addToCart(product) {
      this.addProduct(product)
    },
    removeFromCart(productId) {
      this.removeProduct(productId)
    }
  },
  computed: {
    ...mapGetters(['getProducts', 'getTotalPrice'])
  }
}
</script>